/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Documentation Demo
Version: 1.3
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/documentation-demo/

This is a FREE theme and is available under a MIT License:
http://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 - 2013 unless otherwise stated.
*/
/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */

ol, ul {
  list-style: none; }

/* !CSS RESET */
/* prefix declarations */
/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
#sequence.sequence-fallback {
  overflow: hidden; }

/* THEME STYLES */
#sequence {
  border: black solid 3px;
  font-family: Tahoma;
  height: 370px;
  margin: 10px auto;
  position: relative;
  /* required */
  width: 450px;
  /* Frame Animations */
  /* !Frame Animations */ }
  #sequence > .sequence-canvas {
    height: 100%;
    width: 100%; }
    #sequence > .sequence-canvas > li {
      position: absolute;
      /* required */
      width: 100%;
      /* required */
      height: 100%;
      z-index: 1;
      /* required */ }
    #sequence > .sequence-canvas li > * {
      position: absolute;
      /* required */ }
  #sequence #sequence-preloader {
    background: white; }
  #sequence .class-name,
  #sequence .sequence-class {
    font-size: 0.8em; }
  #sequence .info1,
  #sequence .info2,
  #sequence .info3 {
    background: #3f7ad6;
    display: block;
    color: white;
    height: 95px;
    padding: 5px;
    width: 95px;
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -ms-transition-property: left;
    -o-transition-property: left;
    transition-property: left; }
  #sequence .info1 {
    left: -150px;
    top: 10px; }
  #sequence .info2 {
    left: -150px;
    top: 130px; }
  #sequence .info3 {
    left: -150px;
    top: 250px; }
  #sequence .animate-in .info1,
  #sequence .animate-in .info2,
  #sequence .animate-in .info3 {
    left: 165px;
    opacity: 1;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s; }
  #sequence .animate-out .info1,
  #sequence .animate-out .info2,
  #sequence .animate-out .info3 {
    left: 500px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s; }
